'use client';

import { Menu, ConfigProvider } from 'antd';
import type { MenuProps } from 'antd';
import React, { useState, useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useScrollToTop } from '@/hooks/useScrollToTop';

type MenuItem = Required<MenuProps>['items'][number];

// 导航栏目录
const items: MenuItem[] = [
  {
    label: '首页',
    key: '/',
  },
  {
    label: '专业服务',
    key: '/pro-services',
    children: [
      {
        label: '模型工程服务',
        key: '/pro-services/model-service',
      },
      {
        label: '数据工程服务',
        key: '/pro-services/data-service',
      },
      {
        label: '应用工程服务',
        key: '/pro-services/app-service',
      },
      {
        label: '技术支撑服务',
        key: '/pro-services/consult-service',
      },
      // {
      //   label: '开源软件服务',
      //   key: '/pro-services/open-source-service',
      // },
    ],
  },
  {
    label: '行业案例',
    key: '/industry-cases',
  },

  {
    label: '联系我们',
    key: '/contact-us',
  },
];

export default function Nav() {
  // 每次渲染导航栏都滚动到顶部
  useScrollToTop();

  const router = useRouter();
  const pathname = usePathname();
  const [current, setCurrent] = useState(pathname);

  // 当路径变化时更新current状态
  useEffect(() => {
    setCurrent(pathname);
  }, [pathname]);

  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key);
    router.push(e.key);
  };

  return (
    <nav className="ml-auto">
      <ConfigProvider
        theme={{
          components: {
            Menu: {
              horizontalItemSelectedBg: 'transparent',
              itemSelectedBg: 'transparent',
              horizontalItemSelectedColor: '#d32d26',
              itemSelectedColor: '#d32d26',
              subMenuItemSelectedColor: '#d32d26',
              fontSize: 16,
            },
          },
        }}
      >
        <Menu
          style={{ borderBottom: 'none' }}
          onClick={onClick}
          selectedKeys={[current]}
          mode="horizontal"
          items={items}
        />
      </ConfigProvider>
    </nav>
  );
}
